<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>七颗牙学堂</title>

    <link href="../css/common.css" rel="stylesheet" type="text/css">
    <link href="../css/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/common.js"></script>
    <script src="../js/comment.js"></script>
</head>
<style>
    body,
    html {
        width: 7.5rem;
    }
    
    #app {
        opacity: 0;
    }
    
    .showerimg {
        width: 7.5rem;
        height: 13.34rem;
        background: url('img/back.jpg') no-repeat 100%;
        background-size: 100% 100%;
    }
    
    .imgcon {
        padding-top: 5rem;
    }
    
    .item {
        width: 5rem;
        height: .6rem;
        line-height: .6rem;
        background: #ddd;
        margin: .3rem auto 0;
        border-radius: 0.04rem;
        overflow: hidden;
    }
    
    .item input {
        display: block;
        width: 4.8rem;
        line-height: .6rem;
        margin: auto;
        outline: none;
        border: none;
        background: #ddd;
        color: #333;
    }
    
    .butimg {
        width: 3.55rem;
        height: .75rem;
        margin: .4rem auto 0;
    }
    
    .butimg img {
        width: 100%;
        height: 100%;
    }
    
    .showerViplo {
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0, 0, 0, .2);
        z-index: 9999;
        top: 0;
    }
    
    .loadmoreshowerVip {
        width: 3rem;
        height: 3rem;
        background: rgba(0, 0, 0, 0);
        margin: 4rem auto 0;
        /* display: none; */
    }
    
    .loadmoreshowerVip img {
        width: 80%;
        height: 80%;
        margin: auto;
        display: block;
    }
</style>

<body>
    <div id='app'>
        <div class="showerimg">
            <div class="imgcon">
                <div class="item">
                    <input type="text" placeholder="请输入真实姓名" v-model='name'>
                </div>
                <div class="item">
                    <input type="text" placeholder="请输入手机号" v-model='phone'>
                </div>
                <div class="butimg" v-if='!butfalse' @click='butclick'>
                    <img src="img/but.png" alt="">
                </div>
                <div class="butimg" v-else>
                    <img src="img/but.png" alt="">
                </div>
            </div>
        </div>

        <div class="showerViplo" v-if="showload">
            <div class="loadmoreshowerVip">
                <img src="../img/load.gif" alt="">
            </div>
        </div>

    </div>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <script type="text/javascript" src="../js/layer.js"></script>
    <script type="text/javascript" src="../js/base64.js"></script>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app ',
            data: {
                // url: 'https://n.qikeya.com/saas/public/index.php/',
                url: 'https://appapi.qikeya.cn/',
                showload: false,
                butfalse: false,
                name: '',
                phone: '',
            },
            methods: {
                butclick() {
                    var that = this;
                    var nae = that.name;
                    var truename = nae.replace(/\s+/g, "");
                    if (truename == '') {
                        layer.open({
                            content: '请输入真实姓名',
                            skin: 'msg',
                            time: 2 //1秒后自动关闭
                        });
                    } else if (!(/^[\u2E80-\u9FFF]+$/.test(truename))) {
                        layer.open({
                            content: '真实姓名只能为汉字',
                            skin: 'msg',
                            time: 2 //1秒后自动关闭
                        });
                    } else if (!(/^1\d{10}$/.test(that.phone))) {
                        layer.open({
                            content: '请输入正确的手机号',
                            skin: 'msg',
                            time: 2 //1秒后自动关闭
                        });
                    } else {
                        that.showload = true;
                        that.butfalse = true;
                        var objdata = {
                            tel: that.phone,
                            name: truename
                        }
                        utilJs.postMethod(that.url + "api/Activities/queryResults", objdata, (res) => {
                            if (Number(res.errcode) == 0) {
                                that.name = '';
                                that.phone = '';
                                layer.open({
                                    content: "查询成功",
                                    skin: 'msg',
                                    time: 2 //1秒后自动关闭
                                });
                                window.location.href = 'result.html?truename=' + Base64.encode(truename) + ''
                            } else {
                                layer.open({
                                    content: res.msg,
                                    skin: 'msg',
                                    time: 2 //1秒后自动关闭
                                });
                            }
                            that.showload = false;
                            that.butfalse = false;

                        })
                    }
                },
            },
            mounted() {
                var that = this;
                that.name = '';
                that.phone = '';
                $('#app').css('opacity', 1);
            }
        })
    </script>
</body>

</html>